<template>
  <div class="my">
    <div class="login">
      <navigator url="/pages/pay/pay">
      <p>
      <img src="https://i0.hdslb.com/bfs/face/member/noface.jpg@96w_96h_1c.webp" alt="">
      </p>
      </navigator>
       <navigator>
         <span v-if="state==false" @click="dl">B站登录</span>
         <b v-else>用户2000_05_03</b>
       </navigator>
    </div>
    <div class="history">
        <div class="history_top"><p>历史记录</p>
      <navigator  url="../record/record" >
        <span>查看更多<i class="iconfont icon-xinbaniconshangchuan-"></i></span> 
      </navigator>
        </div>
        <div class="history_main">
          <navigator class="hm" 
          url="/pages/Detail_Vido/index"
          open-type="navigate"
           v-for="item in historyList.slice(0,3)" :key="item.id"
          >
          <dl>
            <dt><img :src="item.pic" alt=""></dt>
            <dd>{{item.title}}</dd>
          </dl>
          </navigator>
        </div>
    </div>
    <div class="collection">
      <div v-if="state==''"></div>
      <div class="colle" v-else>
         <div class="history_top"><p>我的收藏</p>
      <navigator  url="../record/record" >
        <span>查看更多<i class="iconfont icon-xinbaniconshangchuan-"></i></span> 
      </navigator>
        </div>
        <div class="history_main">
          <navigator class="hm" 
          url="/pages/Detail_Vido/index"
          open-type="navigate"
           v-for="item in historyList.slice(0,3)" :key="item.id"
          >
          <dl>
            <dt><img :src="item.pic" alt=""></dt>
            <dd>{{item.title}}</dd>
          </dl>
          </navigator>
        </div>
      </div>
    </div>
    <div class="feedback">
      <p>意见反馈</p>
      <i class="iconfont icon-xinbaniconshangchuan-"></i>
    </div>
    <div class="exit">
      <span v-if="state==''"></span>
      <span v-else @click="exit">退出登录</span>
    </div>
  </div>
</template>

<script>
import "../../static/font_2nuxdi4nxvd/iconfont.css"
import data from "./../../static/historyList.json";
import {login} from "../../services/index"
export default {
  data(){
    return{
      //数据
      historyList:data.data.result.video,
      state:wx.getStorageSync("STATE")?`${wx.getStorageSync("STATE")}`:''
    }
  },
  onPullDownRefresh(){
    setTimeout(()=>{
      uni.stopPullDownRefresh()
    },2000)
  },
  	methods:{
        dl(){
          this.state=true
          wx.login({
            success:async res=>{
              let result= await login(res.code);
              if(result.code==0){
                  wx.setStorageSync("STATE", result.data.openid);
              }
            }
          })
      },
      exit(){
        wx.clearStorageSync("STATE");
        this.state='';
      }
  },
};
</script>

<style lang="scss" scoped>
  .my{
    width: 100%;
    height: 100%;
    background: #fff;
    .login{
      width: 100%;
      height: 260rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #ddd;
      p{
        width: 125rpx;
        height: 125rpx;
        border-radius: 50%;
        margin-bottom: 20rpx;
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      span{
        display: inline-block;
        width: 160rpx;
        height: 65rpx;
        background: #fd7aa6;
        text-align: center;
        line-height: 70rpx;
        color: #fff;
        border-radius: 10rpx;
      }
    }
    .history{
      width: 100%;
      height: 300rpx;
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #ddd;
      .history_top{
        width: 100%;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p{
          margin-left: 10rpx;
        }
        span{
          display: flex;
          font-size: 30rpx;
          align-items: center;
          color: #999;
          i{
            margin-right: 10rpx;
          }
        }
      }
      .history_main{
        flex: 1;
                display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 10rpx;
        .hm{
          width: 200rpx;
          height: 100%;
        }
        dl{
          width:200rpx;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          dt{
            width: 100%;
            height:150rpx;
            border-radius: 10rpx;
            img{
              width: 100%;
              height: 100%;
            border-radius: 10rpx;

            }
          }
            dd{
              width: 100%;
              font-size: 22rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 8rpx;
            }
        }
      }
    }
    .collection{
      .colle{
      width: 100%;
      height: 300rpx;
      border-bottom: 1px solid #ddd;
      .history_top{
        width: 100%;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p{
          margin-left: 10rpx;
        }
        span{
          display: flex;
          font-size: 30rpx;
          align-items: center;
          color: #999;
          i{
            margin-right: 10rpx;
          }
        }
      }
      .history_main{
        flex: 1;
                display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 10rpx;
        .hm{
          width: 200rpx;
          height: 100%;
        }
        dl{
          width:200rpx;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          dt{
            width: 100%;
            height:150rpx;
            border-radius: 10rpx;
            img{
              width: 100%;
              height: 100%;
            border-radius: 10rpx;
            }
          }
            dd{
              width: 100%;
              font-size: 22rpx;
              white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 8rpx;
            }
        }
      }
      }
    }
    .exit{
      width: 100%;
      height: 120rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      span{
        color: #888;
      }
    }
    .feedback{
      width: 100%;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
      p{
        margin-left: 20rpx;
      }
      i{
        margin-right: 20rpx;
      }
    }
  }
</style>


